<script setup lang="ts">
import { onMounted, ref } from 'vue'
import CdcModal from '@/components/CdcModal/index.vue'
import CdcTable from '@/components/CdcTable/index.vue'
import { xfzsList, xfzsList2 } from '@/api'
import type { loading } from 'vxe-pc-ui'

const cdcModalRef = ref<InstanceType<typeof CdcModal>>()
const tableData = ref([])
const tableData2 = ref([])
const open = (row) => {
  // console.log(row)
  tableData.value.length = 0
  tableData2.value.length = 0
  init(row)
  cdcModalRef.value?.showModal()
}
const init = (row) => {
  // 获取左侧先锋指数数据
  const data = {
    statCode: 'ZJCDC_XFZS_008',
    orgId: row.orgId,
  }
  xfzsList2(data).then((res) => {
    if (res.code === '200') {
      const tjsj1 = res.data[0]?.statData.tjsj1 || []
      tjsj1.forEach((v) => {
        if (v.last_rank) {
          v.direction =
            Number(v.rank) > Number(v.last_rank)
              ? 'bottom'
              : Number(v.rank) === Number(v.last_rank)
                ? '-'
                : 'top'
        } else {
          v.direction = 'top'
        }
      })
      tableData.value = tjsj1
      tableData.value[0].checked = true
      getRightTable(tjsj1[0].dyId)
    }
  })
}
const getRightTable = (id: string | number) => {
  const data = {
    statCode: 'ZJCDC_XFZS_009',
    orgId: id,
  }
  // isLoading.value = true
  tableData2.value = []
  xfzsList2(data).then((res) => {
    // isLoading.value = false
    if (res.code === '200') {
      const tjsj1 = res.data[0]?.statData.tjsj1 || []
      tjsj1.forEach((v) => {
        v.checked = false
        if (v.last_rank) {
          v.direction =
            Number(v.rank) > Number(v.last_rank)
              ? 'bottom'
              : Number(v.rank) === Number(v.last_rank)
                ? '-'
                : 'top'
        } else {
          v.direction = 'top'
        }
      })
      tableData2.value = tjsj1
    }
  })
}
const isLoading = ref<boolean>(false)
const tableHandler = {
  'cell-click': function ({ row, columnIndex }) {
    // console.log(row)
    if (columnIndex === 1) {
      tableData.value.forEach((v) => {
        v.checked = false
      })
      row.checked = true
      getRightTable(row.dyId)
    }
  },
}
onMounted(() => {})
defineExpose({
  open,
})
</script>

<template>
  <CdcModal
    ref="cdcModalRef"
    :data="{
      title: '先锋指数',
    }"
  >
    <div class="flex align-center w-full">
      <div class="h-520px w-40% overflow-hidden">
        <CdcTable
          :table-handler="tableHandler"
          :data="{
            columns: [
              {
                field: 'rank',
                type: 'html',
                title: '排&nbsp;名<span class=text-12px>(较上月浮动)</span>',
                minWidth: 100,
                slot: true,
              },
              { field: 'dyName', title: '党员', minWidth: 80 },
              { field: 'score', title: '平均分', minWidth: 80 },
            ],
            showSeq: false,
            tableConfig: {
              data: tableData,
              align: 'center',
              'header-cell-class-name': 'headCellClass',
              'header-row-class-name': 'bg-#555 text-[16px] table-left text-white',
              'cell-class-name': function ({ columnIndex, row }) {
                const rowClass = row.checked ? ' check-user' : ''
                return columnIndex === 1 ? 'cursor-pointer' + rowClass : ''
              },
              'row-class-name': ({ $rowIndex }: any) => {
                const classes = `${$rowIndex % 2 == 0 ? 'bg-transparent' : 'bg-#253542'} text-white`
                return classes
              },
            },
          }"
        ></CdcTable>
      </div>
      <div class="ml-[30px]"></div>
      <div class="flex-1 px-[20px] rightTable overflow-hidden h-520px">
        <CdcTable
          :data="{
            columns: [
              { field: 'rq', title: '日期', width: '28%' },
              // { field: 'dyName', title: '党员', width: '120' },
              { field: 'reason', title: '加分原因' },
              { field: 'score', title: '加分值', width: '15%' },
            ],
            showSeq: false,
            tableConfig: {
              align: 'center',
              data: tableData2,
              'header-row-class-name': 'bg-#0E2538  text-white',
              'row-class-name': ({ $rowIndex }: any) => {
                return `${$rowIndex % 2 == 0 ? 'bg-transparent' : 'bg-#253542'} text-white`
              },
              // loading: isLoading,
            },
          }"
        ></CdcTable>
      </div>
    </div>
  </CdcModal>
</template>

<style lang="scss" scoped>
:deep(.table-left) {
  background-image: url('@/assets/images/t-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}
:deep(.headCellClass) {
  &:not(:last-child) {
    .vxe-cell {
      border-right: 1px solid #fff;
    }
  }
}
:deep(.headerRowClass) {
  background-image: url('@/assets/images/t-bg.png');
}
:deep(.vxe-table--render-wrapper) {
  background-color: transparent;
  .vxe-table--body-wrapper {
    background-color: transparent;
  }
}
.rightTable {
  :deep(.vxe-table--header-wrapper.body--wrapper) {
    background: none;
  }
}
</style>
<style>
.check-user span {
  color: #89c6d8 !important;
}
</style>
